<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_回顾Object.defineProperty()方法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        名字：{{person.name}}
        <br>
        地址：{{person.addr}}
        <br>
        年龄：<input type="text" v-model:value="person.age"/>
    </div>
    
</body>
<script>
    let num = 19
    let person = {
        name:'张三',addr:'陕西'
    }
    Object.defineProperty(person,'age',{
        // value:'19岁',
        // enumerable:true, //控制属性是否可以被枚举（也就是遍历），默认为false
        // writable:true, //控制属性是否可以被修改，默认为false
        // configurable:true, //控制属性是否可以被删除，默认为false

        // 当有人读取age属性时，getter()就会被调用，且返回规定的值
        get:function(){
            console.log('有人正在读取age的值，返回', num);
            return num
        },
        // 当有人修改age属性时，setter()就会被调用，且给出规定的值
        set:function(v) {
            console.log('有人改了age的值，现在是', v);
            num = v
        }
    })
    console.log('person---', person);
    
    console.log("--------------------------");
    const vm = new Vue({
        data(){
                return{
                    person,
                    tips:'证人死亡'    
                }
            }
    }).$mount("#root")
    
    console.log('vue---', vm);
    
    // Object.defineProperty(vm, "fff",{
    //     value:'0000'
    // })
    
    // console.log('vue后---', vm);
</script>
</html>